﻿@page "/login"
@inherits EShopPageBase
@layout EmptyLayout

<PageTitle>@T("Login.Login")</PageTitle>

<MDialog @bind-Value="_forgetPwdDialog" Persistent Width="500">
    <ChildContent>
        <MCard class="pa-6">
            <MCardTitle class="pa-0">
                <MSpacer></MSpacer>
                <MButton Icon OnClick="() => _forgetPwdDialog = false">
                    <MIcon>mdi-close</MIcon>
                </MButton>
            </MCardTitle>
            <MCardText>
                <MTabs @bind-Value="_forgetPwdTabIndex" Centered>
                    <MTab Value="0">
                        @T("Login.SMSRetrieve")
                    </MTab>

                    <MTab Value="1">
                        @T("Login.EmailRetrieve")
                    </MTab>
                </MTabs>
                <MTabsItems @bind-Value="_forgetPwdTabIndex">
                    <MTabItem Value="0">
                        <MCard Flat>
                            <MCardText>
                                <MRow NoGutters>
                                    <MCol Cols="12">
                                        <MTextField Label="@T("Login.Phone")" Placeholder="@T("Login.PhoneHolder")" TValue="string"></MTextField>
                                    </MCol>
                                    <MCol Cols="12">
                                        <MTextField Label="@T("Login.Code")" Placeholder="@T("Login.CodeHolder")" TValue="string">
                                            <AppendContent>
                                                <MButton Outlined>
                                                    @T("Login.GetCode")
                                                </MButton>
                                            </AppendContent>
                                        </MTextField>
                                    </MCol>
                                </MRow>
                            </MCardText>
                        </MCard>
                    </MTabItem>
                    <MTabItem Value="1">
                        <MCard Flat>
                            <MCardText>
                                <MRow>
                                    <MCol Cols="12">
                                        <MTextField Label="@T("Login.Email")" Placeholder="@T("Login.EmailHolder")" TValue="string"></MTextField>
                                    </MCol>
                                </MRow>
                            </MCardText>
                        </MCard>
                    </MTabItem>
                </MTabsItems>
            </MCardText>
            <MCardActions>
                <MButton Color="primary" class="rounded-pill" Block OnClick="() => _forgetPwdDialog = false">
                    @T("Base.Sure")
                </MButton>
            </MCardActions>
        </MCard>
    </ChildContent>
</MDialog>

<MRow Class="max-height ma-0">
    <MCol Md=4 Sm=12 Class="neutral-lighten-5">
        <image class="ml-12 mt-12" style="height:40px;" src="https://cdn.masastack.com/stack/images/logo/MasaStack/logo-h-en.png?x-oss-process=image/resize,w_200"></image>
        <div class="d-flex pb-12" style="height: calc(100% - 88px);">
            <div style="width:450px;" class="ma-auto">
                <h3 class="neutral-lighten-1--text">让变化更简单</h3>
                <div class="mt-12 neutral-lighten-1--text">
                    让变化更简单，让视觉更美好，让体验更丰富，欢迎来到Masa产品系列。
                </div>
                <image class="mt-12" src="/img/login/left.svg"></image>
            </div>
        </div>
    </MCol>
    <MCol Md=8 Sm=12 Class="fill-lighten-1 block-center">
        <MCard Width=510 Height=680 Class="mx-auto my-auto">
            <div style="height:60px;"></div>
            <div class="mt-2 mx-auto text-center" style="width:420px;">
                <MAvatar Size=80>
                    <MImage Src="/img/avatar/avatar.jpg">
                    </MImage>
                </MAvatar>
                <h5 class="mt-2 mb-12">Welcome to Masa.EShop! 👋</h5>
                <MTextField Label="@T("Login.UserName")" HideDetails="@("auto")"
                            Placeholder="john@example.com"
                            Outlined @bind-Value="_userName">
                </MTextField>
                <MTextField Class="mt-10"
                            Label="@T("Login.Password")" @bind-Value="_password"
                            AppendIcon="@(_showPwd ? "mdi-eye" : "mdi-eye-off")"
                            Type="@(_showPwd ? "text" : "password")"
                            Hint="At least 8 characters"
                            OnAppendClick="() => _showPwd = !_showPwd"
                            Outlined HideDetails="@("auto")">
                </MTextField>
                <div class="d-flex justify-end mt-1">
                    <span class="text-caption hover-pointer" @onclick="()=>{ _forgetPwdDialog = true; }">
                        @T("Login.ForgetPassword")
                    </span>
                </div>

                <MButton Class="mt-11 rounded-4 text-btn white--text" Height=46 Width=340 Color="primary" OnClick="LoginHandler">@T("Login.Login")</MButton>

                <div class="my-6">
                    <span class="text-btn">New on our platform? &nbsp;</span>
                    <span class="primary--text hover-pointer">@T("Login.ToRegister")</span>
                </div>
                <div class="d-flex block-center">
                    <div style="height:0.5px;width:152px;" class="neutral-lighten-5"></div>
                    <span class="text-caption mx-4">or login with</span>
                    <div style="height:0.5px;width:152px;" class="neutral-lighten-5"></div>
                </div>
                <div class="mt-4">
                    <MIcon Size=24 Color="neutral-lighten-2" OnClick="()=>{}">fab fa-codepen</MIcon>
                    <MIcon Size=24 Color="neutral-lighten-2" Class="ml-6" OnClick="()=>{}">fab fa-github</MIcon>
                    <MIcon Size=24 Color="neutral-lighten-2" Class="ml-6" OnClick="()=>{}">fab fa-twitter</MIcon>
                    <MIcon Size=24 Color="neutral-lighten-2" Class="ml-6" OnClick="()=>{}">fab fa-instagram</MIcon>
                </div>
            </div>
        </MCard>
    </MCol>
</MRow>